<template>
  <div class="m-continer">
    <Header></Header>
    <h2>记账管理--首页</h2>
    <!--<button @click="getBills()">查询</button>-->
    <div>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand" height="250">

              <el-form-item label="id" type="hidden" style="display: none">
                <span>{{ props.row.id }}</span>
              </el-form-item>

              <el-form-item label="金额">
                <span>{{ props.row.money }}</span>
              </el-form-item>
              <el-form-item label="分类">
                <span>{{ props.row.catename }}</span>
              </el-form-item>
              <el-form-item label="账户">
                <span>{{ props.row.accountname }}</span>
              </el-form-item>
              <el-form-item label="时间">
                <span>{{ props.row.time }}</span>
              </el-form-item>
              <el-form-item label="备注">
                <span>{{ props.row.remark }}</span>
              </el-form-item>
              <el-form-item label="账本">
                <span>{{ props.row.bookname }}</span>
              </el-form-item>
              <el-form-item label="类型">
                <span>{{ props.row.type }}</span>
              </el-form-item>
              <el-form-item label="操作">
                <el-button type="primary" icon="el-icon-edit" circle @click="editBill(props.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="deleteBillById(props.row.id)"></el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            label="时间"
            prop="time"
            sortable>
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="金额"
            prop="money"
            sortable>
          <template slot-scope="scope">
            <i class="el-icon-goods"></i>
            <span style="margin-left: 10px; color: indianred">-{{ scope.row.money }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="分类"
            prop="catename">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.catename }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="备注"
            prop="remark">
        </el-table-column>
      </el-table>
    </div>
    <!--记一笔 抽屉-->
    <el-drawer
        title="记一笔"
        :visible.sync="dialog"
        :before-close="handleClose"
        direction="btt"
        custom-class="demo-drawer"
        ref="drawer"
        size="50%"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">

          <el-form-item type="hidden" style="display: none" label="id" :label-width="formLabelWidth" required>
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="金额" :label-width="formLabelWidth" required>
            <el-input v-model="form.money" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时间" :label-width="formLabelWidth">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.time" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="分类" :label-width="formLabelWidth" required>
            <el-radio-group v-model="form.catename" size="medium">
              <el-radio v-for="item in catenames" border :label="item.name"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="资产账户" :label-width="formLabelWidth" required>
            <el-radio-group v-model="form.accountname" size="medium">
              <el-radio v-for="item in accountnames" border :label="item.name"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer();" :loading="loading">
            {{ loading ? '提交中 ...' : '修 改' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Header from "../components/Header";

export default {
  name: "Index",
  components: {Header},
  created() {
    this.getBills()
  },
  methods: {
    init() {
      const _this = this
      _this.$axios.get("/catename").then(res => {
        // TODO: 分类（大类 --》 小类）
        this.catenames = res.data.data['支出'];
        console.log(this.catenames)
        console.log(res.data.data)
        this.dialog = true
      })
      _this.$axios.get("/account").then(res => {
        this.accountnames = res.data.data;
        console.log(this.accountnames)
        console.log(res.data.data)
        this.dialog = true
      })
    },
    getBills() {
      this.$axios.get("/bill").then(res => {
        this.tableData = res.data.data
      })
    },
    deleteBillById(id) {
      this.$confirm('确定删除该账单吗？')
          .then(_ => {
            this.$axios.delete("/bill/" + id).then(res => {
              this.tableData = res.data.data
              this.getBills()
            })
          })
    },
    editBill(row) {
      console.log("row:")
      console.log(row)
      this.form = row;
      this.init()
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$axios.post("/bill", this.form).then(res => {
        console.log("this.form:")
        console.log(this.form)
        console.log(res)
        this.loading = true;
        this.timer = setTimeout(() => {
          done();
          // 动画关闭需要一定的时间
          setTimeout(() => {
            this.loading = false;
            this.getBills()
          }, 100);
        }, 200);
      }).catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    getCurrentTime() {
      var date = new Date();//当前时间
      var month = this.zeroFill(date.getMonth() + 1);//月
      var day = this.zeroFill(date.getDate());//日
      var hour = this.zeroFill(date.getHours());//时
      var minute = this.zeroFill(date.getMinutes());//分
      var second = this.zeroFill(date.getSeconds());//秒

      //当前时间
      var curTime = date.getFullYear() + "-" + month + "-" + day
          + "T" + hour + ":" + minute + ":" + second;

      return curTime;
    },
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    }
  },
  // TODO: 修改时间出现错误
  data() {
    return {
      dialog: false,
      loading: false,
      tableData: [{
        accountname: "支付宝",
        bookname: "日常账本",
        catename: "咖啡",
        id: 3,
        money: 26.5,
        remark: "在星巴克购买咖啡",
        time: "2021-07-04T11:03:17",
        type: 1
      }],
      form: {
        id: "",
        type: "1",
        money: "",
        time: this.getCurrentTime(),
        remark: "在星巴克购买咖啡",
        catename: "咖啡",
        accountname: "微信",
        bookname: "日常账本"
      },
      catenames: [{
        "id": 1,
        "typeId": 1,
        "userId": 1,
        "name": "咖啡",
        "icon": 0
      }],
      accountnames: [{
        "id": 1,
        "userId": 1,
        "name": "微信",
        "money": 456
      }],
      type: [],
      formLabelWidth: '80px',
      timer: null,
    }
  }
}

</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>